{% extends "base_generic.html" %}

{% block content %}
  <!-- Hero Section -->
  <div class="jumbotron bg-primary text-white rounded-3 p-5 mb-4">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Welcome to Local Library</h1>
      <p class="col-md-8 fs-4">Your gateway to knowledge and learning. Discover, borrow, and explore thousands of books from our extensive collection.</p>
      {% if not user.is_authenticated %}
        <a href="{% url 'register' %}" class="btn btn-outline-light btn-lg">Join Today</a>
      {% else %}
        <a href="{% url 'books' %}" class="btn btn-outline-light btn-lg">Browse Books</a>
      {% endif %}
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="row g-4 mb-5">
    <div class="col-md-3">
      <div class="card border-0 text-center h-100">
        <div class="card-body">
          <div class="text-primary mb-3">
            <i class="bi bi-book display-4"></i>
          </div>
          <h3 class="card-title text-primary">{{ num_books }}</h3>
          <p class="card-text text-muted">Total Books</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card border-0 text-center h-100">
        <div class="card-body">
          <div class="text-success mb-3">
            <i class="bi bi-collection display-4"></i>
          </div>
          <h3 class="card-title text-success">{{ num_instances }}</h3>
          <p class="card-text text-muted">Total Copies</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card border-0 text-center h-100">
        <div class="card-body">
          <div class="text-info mb-3">
            <i class="bi bi-check-circle display-4"></i>
          </div>
          <h3 class="card-title text-info">{{ num_instances_available }}</h3>
          <p class="card-text text-muted">Available Now</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card border-0 text-center h-100">
        <div class="card-body">
          <div class="text-warning mb-3">
            <i class="bi bi-person display-4"></i>
          </div>
          <h3 class="card-title text-warning">{{ num_authors }}</h3>
          <p class="card-text text-muted">Authors</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="row">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="bi bi-lightning"></i> Quick Actions</h5>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <a href="{% url 'books' %}" class="btn btn-outline-primary w-100">
                <i class="bi bi-search"></i> Browse Books
              </a>
            </div>
            <div class="col-md-6">
              <a href="{% url 'authors' %}" class="btn btn-outline-secondary w-100">
                <i class="bi bi-people"></i> View Authors
              </a>
            </div>
            {% if user.is_authenticated %}
              <div class="col-md-6">
                <a href="{% url 'my-borrowed' %}" class="btn btn-outline-success w-100">
                  <i class="bi bi-bookmark"></i> My Books
                </a>
              </div>
              <div class="col-md-6">
                <a href="{% url 'profile' %}" class="btn btn-outline-info w-100">
                  <i class="bi bi-person-gear"></i> My Profile
                </a>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="bi bi-info-circle"></i> Your Activity</h5>
        </div>
        <div class="card-body">
          {% if user.is_authenticated %}
            <p class="mb-2">Welcome back, <strong>{{ user.first_name|default:user.username }}</strong>!</p>
            <p class="text-muted">You have visited this page <strong>{{ num_visits }}</strong> time{{ num_visits|pluralize }}.</p>
          {% else %}
            <p class="mb-3">Join our library community!</p>
            <div class="d-grid gap-2">
              <a href="{% url 'register' %}" class="btn btn-primary">Sign Up</a>
              <a href="{% url 'login' %}" class="btn btn-outline-primary">Login</a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Features Section -->
  {% if not user.is_authenticated %}
    <div class="row mt-5">
      <div class="col-12">
        <h2 class="text-center mb-4">Why Choose Our Library?</h2>
        <div class="row g-4">
          <div class="col-md-4 text-center">
            <div class="mb-3 text-primary">
              <i class="bi bi-clock display-4"></i>
            </div>
            <h5>24/7 Access</h5>
            <p class="text-muted">Browse and manage your books anytime, anywhere with our online platform.</p>
          </div>
          <div class="col-md-4 text-center">
            <div class="mb-3 text-success">
              <i class="bi bi-shield-check display-4"></i>
            </div>
            <h5>Easy Returns</h5>
            <p class="text-muted">Simple and hassle-free book return process with automatic reminders.</p>
          </div>
          <div class="col-md-4 text-center">
            <div class="mb-3 text-info">
              <i class="bi bi-collection display-4"></i>
            </div>
            <h5>Vast Collection</h5>
            <p class="text-muted">Discover thousands of books across all genres and subjects.</p>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

{% endblock %} 